<template>
    <div class="all">
        <ul>
            <li v-for="item in list" :key="item.id">
                <div class="top">
                    <span>{{item.cinema}} ></span>
                    <span>{{item.tips}}</span>
                </div>
                <div class="center">
                    <img :src="item.imgs" alt="">
                    <div class="right">
                        <h3>
                            <span>{{item.title}}</span>
                            <span>{{item.num}}张</span>
                        </h3>
                        <p>{{item.time}}</p>
                        <p>{{item.address}}</p>
                    </div>
                    <van-button round v-show="hid" type="danger" @click="del(item.ids)">删除</van-button>
                </div>
                <p>总票价: {{item.num*item.price}}元</p>

            </li>
        </ul>
    </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    props:["hid"],
    data() {
        return {
           
        };
    },
    computed: {
        list(){
            return this.$store.state.orderList.filter(ele => ele.state == 1)
        }
    },
    created() {
        
    },
    mounted() {

    },
    methods: {
        del(val){
            var item = this.$store.state.orderList.findIndex(ele => ele.ids == val)
            // console.log(val,item,this.list)
            Dialog.confirm({
                // title: '标题',
                message: 'Are You Sure Delete?',
                confirmButtonText:"Yes",
                confirmButtonColor: "#0e47b1",
                cancelButtonText:"No",
                cancelButtonColor:"#929693",
            })
            .then(() => {
                this.$store.commit("del",item)
                //自定义事件修改父类值
                this.$emit("childevent",this.hid)
            })
            .catch(() => {
                //自定义事件修改父类值
                this.$emit("childevent",this.hid)
            });
                
        }
    },
};
</script>

<style scoped lang="scss">
.all{
    ul{
        li{
            height: 161px;
            padding: 5px 10px;
            background-color: #33363D;
            margin: 20px auto;
            .top{
                display: flex;
                margin: 10px 0;
                justify-content: space-between;
            }
            .center{
                display: flex;
                align-items: center;
                img{
                    width:70px;
                    height:81px;
                    margin-right: 10px;
                }
                .right{
                    text-align: left;
                    h3{
                        width: 155px;
                        font-weight: normal;
                        font-size:14px;
                        margin: 5px auto ;
                        :last-child{
                            float: right;
                        }
                    }
                    p{
                        margin: 1px 0;
                        color: grey;
                    }
                }
            }
            p{
                text-align: left;
                margin: 10px 0;
                color: grey;
            }
        }
    }
}
</style>
